<template>
    <div class="zone-manage-container">
      <el-card>
        <template #header>
          <div class="card-header">
            <div>
              <el-input v-model="searchKeyword" placeholder="搜索分区编码" size="small"
                style="width: 160px; margin-right: 10px" @input="filterTable" />
              <el-select v-model="filterWarehouse" placeholder="所属仓库" size="small" clearable
                style="width: 160px; margin-right: 10px" @change="filterTable">
                <el-option v-for="item in warehouseOptions" :key="item" :label="item" :value="item" />
              </el-select>
              <el-select v-model="filterType" placeholder="分区类型" size="small" clearable
                style="width: 160px; margin-right: 10px" @change="filterTable">
                <el-option v-for="item in zoneTypeOptions" :key="item" :label="item" :value="item" />
              </el-select>
              <el-button type="primary" icon="Plus" @click="openDialog">新增分区</el-button>
              <el-button icon="Download" @click="exportTable">导出</el-button>
            </div>
          </div>
        </template>
  
        <el-table :data="filteredData" border stripe>
          <el-table-column prop="zoneCode" label="分区编码" />
          <el-table-column prop="zoneName" label="分区名称" />
          <el-table-column prop="zoneType" label="分区类型" />
          <el-table-column prop="warehouseName" label="所属仓库" />
          <el-table-column prop="manager" label="负责人" />
          <el-table-column prop="capacity" label="容量(m³)" />
          <el-table-column label="状态">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="启用"
                inactive-value="停用"
                @change="toggleStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" />
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" @click="editRow(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteRow(scope.row.zoneCode)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
      <!-- 编辑弹窗 -->
      <el-dialog v-model="dialogVisible" title="分区信息" width="600px">
        <el-form :model="form" label-width="100px">
          <el-form-item label="分区编码">
            <el-input v-model="form.zoneCode" />
          </el-form-item>
          <el-form-item label="分区名称">
            <el-input v-model="form.zoneName" />
          </el-form-item>
          <el-form-item label="分区类型">
            <el-select v-model="form.zoneType" placeholder="请选择">
              <el-option v-for="item in zoneTypeOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="所属仓库">
            <el-select v-model="form.warehouseName" placeholder="请选择">
              <el-option v-for="item in warehouseOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="负责人">
            <el-input v-model="form.manager" />
          </el-form-item>
          <el-form-item label="容量(m³)">
            <el-input v-model="form.capacity" type="number" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveForm">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </template>

<script setup lang="ts">
import { ref } from 'vue'

interface Zone {
  zoneCode: string
  zoneName: string
  zoneType: string
  warehouseName: string
  manager: string
  capacity: number
  status: '启用' | '停用'
  remark: string
}

const zoneTypeOptions = ['常温区', '冷藏区', '危险品区', '贵重品区', '整托区']
const warehouseOptions = ['一号仓库', '二号仓库', '南区仓', '北区冷藏', '危险品专仓']
const managerOptions = ['张三', '李四', '王五', '赵六', '孙七']

const searchKeyword = ref('')
const filterType = ref('')
const filterWarehouse = ref('')
const dialogVisible = ref(false)
const originalCode = ref('')

const rawData = ref<Zone[]>([
  { zoneCode: 'Z100', zoneName: '分区-A', zoneType: '冷藏区', warehouseName: '北区冷藏', manager: '王五', capacity: 273, status: '启用', remark: '禁止存放液体' },
  { zoneCode: 'Z101', zoneName: '分区-B', zoneType: '常温区', warehouseName: '北区冷藏', manager: '王五', capacity: 76, status: '停用', remark: '需隔离通风' },
  { zoneCode: 'Z102', zoneName: '分区-C', zoneType: '常温区', warehouseName: '北区冷藏', manager: '赵六', capacity: 298, status: '启用', remark: '监控覆盖' },
  { zoneCode: 'Z103', zoneName: '分区-D', zoneType: '整托区', warehouseName: '二号仓库', manager: '李四', capacity: 197, status: '启用', remark: '禁止存放液体' },
  { zoneCode: 'Z104', zoneName: '分区-E', zoneType: '贵重品区', warehouseName: '二号仓库', manager: '李四', capacity: 77, status: '停用', remark: '监控覆盖' },
  { zoneCode: 'Z105', zoneName: '分区-F', zoneType: '冷藏区', warehouseName: '一号仓库', manager: '张三', capacity: 82, status: '启用', remark: '需隔离通风' },
  { zoneCode: 'Z106', zoneName: '分区-G', zoneType: '危险品区', warehouseName: '危险品专仓', manager: '赵六', capacity: 144, status: '启用', remark: '' },
  { zoneCode: 'Z107', zoneName: '分区-H', zoneType: '常温区', warehouseName: '南区仓', manager: '孙七', capacity: 55, status: '启用', remark: '' },
  { zoneCode: 'Z108', zoneName: '分区-I', zoneType: '贵重品区', warehouseName: '二号仓库', manager: '王五', capacity: 113, status: '停用', remark: '' },
  { zoneCode: 'Z109', zoneName: '分区-J', zoneType: '冷藏区', warehouseName: '北区冷藏', manager: '张三', capacity: 300, status: '启用', remark: '' },
  { zoneCode: 'Z110', zoneName: '分区-K', zoneType: '整托区', warehouseName: '一号仓库', manager: '李四', capacity: 265, status: '启用', remark: '' },
  { zoneCode: 'Z111', zoneName: '分区-L', zoneType: '危险品区', warehouseName: '危险品专仓', manager: '王五', capacity: 110, status: '停用', remark: '温控要求高' },
  { zoneCode: 'Z112', zoneName: '分区-M', zoneType: '常温区', warehouseName: '南区仓', manager: '赵六', capacity: 210, status: '启用', remark: '' },
  { zoneCode: 'Z113', zoneName: '分区-N', zoneType: '冷藏区', warehouseName: '北区冷藏', manager: '王五', capacity: 170, status: '启用', remark: '禁止存放液体' },
  { zoneCode: 'Z114', zoneName: '分区-O', zoneType: '贵重品区', warehouseName: '一号仓库', manager: '张三', capacity: 138, status: '停用', remark: '' }
])

const filteredData = ref([...rawData.value])

const form = ref<Zone>({
  zoneCode: '',
  zoneName: '',
  zoneType: '',
  warehouseName: '',
  manager: '',
  capacity: 0,
  status: '启用',
  remark: ''
})

function openDialog() {
  form.value = {
    zoneCode: '',
    zoneName: '',
    zoneType: '',
    warehouseName: '',
    manager: '',
    capacity: 0,
    status: '启用',
    remark: ''
  }
  originalCode.value = ''
  dialogVisible.value = true
}

function editRow(row: Zone) {
  form.value = { ...row }
  originalCode.value = row.zoneCode
  dialogVisible.value = true
}

function saveForm() {
  const index = rawData.value.findIndex(item => item.zoneCode === originalCode.value)
  if (index > -1) {
    rawData.value[index] = { ...form.value }
  } else {
    rawData.value.push({ ...form.value })
  }
  filterTable()
  dialogVisible.value = false
}

function deleteRow(code: string) {
  rawData.value = rawData.value.filter(item => item.zoneCode !== code)
  filterTable()
}

function toggleStatus(row: Zone) {
  row.status = row.status === '启用' ? '停用' : '启用'
  filterTable()
}

function filterTable() {
  filteredData.value = rawData.value.filter(item => {
    const matchKeyword = item.zoneCode.includes(searchKeyword.value.trim())
    const matchType = filterType.value ? item.zoneType === filterType.value : true
    const matchWarehouse = filterWarehouse.value ? item.warehouseName === filterWarehouse.value : true
    return matchKeyword && matchType && matchWarehouse
  })
}

function exportTable() {
  const headers = ['分区编码','分区名称','分区类型','所属仓库','负责人','容量','状态','备注']
  const keys = ['zoneCode','zoneName','zoneType','warehouseName','manager','capacity','status','remark']
  const csv = [
    headers.join(','),
    ...filteredData.value.map(row => keys.map(k => row[k as keyof Zone]).join(','))
  ].join('\n')

  const blob = new Blob([csv.replace(/\\\\n/g, '\\n')], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = '分区配置数据.csv'
  link.click()
}
</script>
<style scoped>
.zone-manage-container {
  padding: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

  